import React, { useEffect, useState } from 'react'
import style from './style.less'
// import img from '@/images/supply/turnip.png'
import { Button, Ellipsis, NoticeBar } from 'antd-mobile'
import { ClockCircleOutline, ExclamationCircleOutline } from 'antd-mobile-icons'
import { getcg } from '@/services/caig'
interface DataDto {
    id: string;
    commodityName: string;
    expectedAmount: number;
    expectedPrice: number;
    updateTime: string;
    quantity: number;
    measurementUnit: string;
    shipmentPlace: string;
    originPlace: string;
    maxPrice: number;
    minPrice: number;
    description: string;
    messages:string;
}
type Props = {
    status?: boolean;
    statuss?: boolean;
    statusss?: boolean;
}
export default (props: Props) => {
    const { status, statuss, statusss } = props
    const [goodsList, setGoodsList] = useState<DataDto[]>([])
    const getDataThird = async () => {
        const res = await getcg({ auditStatus: 1, status: 1 ,userId: 1})
        setGoodsList(res)
    }


    useEffect(() => {
        getDataThird()
    }, [])
   
    return (
        <div className={style.page}>

            {goodsList.map((item) => (
                <div
                    key={item.id}
                    className={style['list-item']}
                >
                    {statusss ? (
                        <NoticeBar
                            icon={<ExclamationCircleOutline />}
                            content={'驳回原因：' + item?.messages}
                            wrap
                            color='alert'
                        />
                    ) : null}

                    <div className={style.con}>
                        {/* <div className={style['con-left']}>
                            {item?.picture ? (
                                <img src={item?.picture} alt="商品图片" />
                            ) : null}
                        </div> */}
                        <div className={style['con-right']}>
                            <div className={style.name}>
                                <span className={style.sign}>白萝卜</span>
                                <span className={style.names}>
                                    <Ellipsis direction='end' content={item?.commodityName} rows={3} />
                                </span>

                            </div>
                        </div>

                    </div>
                    <div className={style['con-bottom']}>
                        <div className={style.money}>
                            价格
                            <span className={style.price}>{item?.minPrice}-{item?.maxPrice}/斤</span>
                        </div>
                        <div className={style.money}>
                            数量
                            <span className={style.price}>{item?.quantity}斤</span>
                        </div>
                    </div>
                    <div className={style.description}>
                        <div className={style['con-title']}>
                            <span className={style['con-title-a']}>产地</span>
                            <span className={style['con-title-b']}>{item?.shipmentPlace}</span>
                        </div>
                        <div className={style['con-title']}>
                            <span className={style['con-title-a']}>发货地</span>
                            <span className={style['con-title-b']}>{item?.originPlace}</span>
                        </div>
                        <div className={style['con-title']}>
                            <span className={style['con-title-a']}>商品描述</span>
                            <span className={style['con-title-b']}>
                                <Ellipsis
                                    direction='end'
                                    content={item?.description}
                                    expandText='查看全部'
                                    collapseText='收起'
                                    style={{ color: '#5D7093' }}
                                />

                            </span>
                        </div>
                    </div>
                    <div className={style.bottom}>
                        <div className={style['bottom-left']}>
                            <ClockCircleOutline />
                            <span>{item?.updateTime}</span>
                        </div>
                        <div className={style['bottom-right']}>
                            {statuss ? (<Button
                                fill='outline'
                                size='small'
                            >
                                取消发布
                            </Button>) : null}
                            {status ? (
                                <Button
                                    fill='outline'
                                    size='small'
                                    color='success'
                                >
                                    编辑
                                </Button>
                            ) : null}
                        </div>
                    </div>
                </div>
            ))}

        </div>
    )
}
